<template>
  <page-container class="label-production">
    <a-card :bordered="false" :bodyStyle="{ padding: '0', height: '100%', marginBottom: '10px' }">
      <a-tabs :active-key="tabActiveKey" @change="handleTabChange">
        <a-tab-pane v-for="tab in tabList" :key="tab.key" :tab="tab.tab" />
      </a-tabs>
    </a-card>

    <a-card
      :bordered="false"
      :bodyStyle="{ padding: '16px 0', height: '100%' }"
      :style="{ height: '100%' }"
    >
      <router-view />
    </a-card>
  </page-container>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  onMounted,
  watch,
  inject,
  ref,
  computed,
  onActivated,
} from 'vue';
import { GridContent } from '@/components';
import { useRoute, useRouter } from 'vue-router';

export default defineComponent({
  name: 'labelProduction',
  setup() {
    const route = useRoute();
    const router = useRouter();
    const tabList = [
      {
        key: 'custom',
        path: 'create-custom-label',
        tab: '创建自定义专题标签',
      },
      {
        key: 'ai',
        path: 'create-ai-label',
        tab: '创建AI标签',
      },
      {
        key: 'jq',
        path: 'create-jq-label',
        tab: '创建接警标签',
      },
      {
        key: 'fk',
        path: 'create-fk-label',
        tab: '创建反馈标签',
      },
    ];
    const state = reactive<{
      selectedKeys: string[];
      tabList: any[];
      tabActiveKey: string;
    }>({
      selectedKeys: [],
      tabList,
      tabActiveKey: 'ai',
    });

    const menuKey = ref(1);
    onActivated(() => {
      menuKey.value++;
    });
    const updateCurrentSelectMenu = () => {
      const allMatched = route.matched.concat();
      state.selectedKeys = allMatched.map(item => item.path);
    };
    const handleTabChange = key => {
      state.tabActiveKey = key;
      const currentTab = state.tabList.find(item => item.key === key);
      router.push({ name: currentTab.path });
    };

    onMounted(() => {
      updateCurrentSelectMenu();

      watch(
        () => route.fullPath,
        () => {
          updateCurrentSelectMenu();
        },
      );
    });
    const isMobile = inject('isMobile', ref(false));
    return {
      menuKey,
      isMobile,
      mode: computed(() => (isMobile.value ? 'horizontal' : 'vertical')),
      ...toRefs(state),
      handleTabChange,
    };
  },
  components: { GridContent },
});
</script>

<style lang="less" scoped>
.label-production {
  :deep(.ant-tabs-line) {
    .ant-tabs-top-bar {
      margin: 0;
    }
    .ant-tabs-nav-scroll {
      text-align: center;
    }
  }
}
</style>
